<html>
	<head>
    
		<title>Trombino - Evaluation étudiant</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="public/js/jquery.min.js"></script>
		<script type="text/javascript" src="public/js/d3.v2.js"></script>
		<script type="text/javascript">
		//tableau des raisons
		var arrRaisons = {0:"abscent", 1:"présent", 2:"retard", 3:"travail non fait"};

		//enregistrement de la raison d'un clic
		function saveRaison(raison, etu) {
			//récupère les informations de l'étudiant
			var nom = $("#etu_nom_"+etu).text();
			var r = arrRaisons[raison];
			var url = $("#etu_tof_"+etu).attr("src");
			var p = {"raison":r, "etu":nom, "url":url};
			
			$.get("ecrire.php", p,
					 function(data){
						dataCloud = data;
					 }, "json");}
			
			/*$.post("public/evaletu/ecrire", p,
					 function(data){
						dataCloud = data;
					 }, "json");
		}*/
		
		//récupération des raison d'un étudiant
		function getRaison(etu) {
			//récupère les informations de l'étudiant
			var nom = $("#etu_nom_"+etu).text();
			var p = {"etu":nom};
			$.get("lire.php", p,
					 function(data){
						dessineGraph(data, etu);
					 }, "json");
		}

//dessine le graphe svg
function dessineGraph(data, etu){
var m = [40, 60, 40, 10],
w = 1000 - m[1] - m[3],
h = 300 - m[0] - m[2],
fmtHeure = d3.time.format("%H:%M"),
fmtDate = d3.time.format("%Y-%m-%d");
fmtDateY = d3.time.format("%m-%d");

var svg = d3.select("#etu_svg_"+etu).append("svg:svg")
.attr("width", w + m[1] + m[3]) // largeure de la balise svg
.attr("height", h + m[0] + m[2]) // hauteur de la balise Svg
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

//spécification des échelles
//https://github.com/mbostock/d3/wiki/Time-Formatting
var dateDeb = fmtDate.parse("2012-10-10"),
dateFin = fmtDate.parse("2013-01-31"),
heureDeb = fmtHeure.parse("9:00"),
heureFin = fmtHeure.parse("17:00"),
x = d3.time.scale().range([0, w]).domain([dateDeb, dateFin]),
y = d3.time.scale().range([h, 0]).domain([heureDeb, heureFin]),
xAxis = d3.svg.axis().scale(x).ticks(20).tickSize(-h).tickSubdivide(true).tickFormat(fmtDateY),
yAxis = d3.svg.axis().scale(y).ticks(6).orient("right").tickFormat(fmtHeure);
//xAxis.tickValues([dateDeb, fmtDate.parse("2012-10-29"),fmtDate.parse("2013-01-07")]);
//affichage des échelles
// Add the x-axis.
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);

// Add the y-axis.
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + w + ",0)")
.call(yAxis);	

svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d, i) {
return 10*i;
})
.attr("width", 10)
.attr("y", function(d) {
return 0;
})
.attr("height", function(d, i) {
return 10*i;
});	
}
		</script>
		




<style>
.btn {
cursor:pointer;
}
.tof {
width:200px;
}
.good {
color:green;
}
.bad {
color:red;
}
.bar {
fill: steelblue;
}

div.conteneur {
text-align:left; /* centrage horizontal */
clear:both;
border-style:solid;
border-width:2px;	
}

div.bloc {
float:left;
margin:3px 3px 3px 3px; 
}

.axis {
shape-rendering: crispEdges;
}

.x.axis line {
stroke: #fff;
}

.x.axis .minor {
stroke-opacity: .5;
}

.x.axis path {
display: none;
}

.y.axis line, .y.axis path {
fill: none;
stroke: #000;
}

</style>

		
	</head>
	<body >	
    
    <meta charset="utf-8">
    
    
    <?php 
    $xml = simplexml_load_file("https://picasaweb.google.com/data/feed/base/user/113848708930851956597/albumid/5795380358275112865?alt=rss&kind=photo&hl=fr");
	
	$i=0;
	foreach ($xml->channel->item as $item){ // Je boucle par apport a l'hearchie chanel , item
if($i % 2 == 0) $c = 'good'; else $c = 'bad';

echo "<div id='etu_".$i."' class='conteneur' >";
echo "<div class='bloc' >";
echo "<img src='public/img/timeP.jpg' class='btn'
onclick='saveRaison(1,".$i.")' />";
echo "<img src='public/img/timeE.jpg' class='btn'
onclick='saveRaison(2,".$i.")' />";
echo "<img src='public/img/timeR.jpg' class='btn'
onclick='saveRaison(3,".$i.")' />";
echo "<img src='public/img/timeA.jpg' class='btn'
onclick='saveRaison(0,".$i.")' />";
echo "</div>";
echo "<div class='bloc' >";
echo "<img id='etu_tof_".$i."' src='".$item->enclosure['url']."'
class='tof' onclick='getRaison(".$i.")' />";
echo "<div class='$c' id='etu_nom_".$i."'>".$item->title."</div>";
echo "</div>";
echo "<div id='etu_svg_".$i."' class='bloc' ></div>";
echo "</div>";

$i++;
	}
	
	
		
$connexion = mysql_connect("localhost", "root", "");
	mysql_select_db("trombino", $connexion);
	
		//résupération des informations
$req=mysql_query("SELECT * FROM cliques");
echo "<h1>Tout les resultats: <br></h1>";
//Affichage des informations
while ($tab_contenu=mysql_fetch_assoc($req)){
echo"l'etudiant: " .$tab_contenu['auteur'];
echo " est " .$tab_contenu['raison'];
echo " le : " .$tab_contenu['date']; echo "<br>";
}
	


echo "<h1>Les étudiant: <br></h1>";	
	//résupération des informations
$req=mysql_query("SELECT * FROM cliques WHERE raison='présent'");
echo"<br> les etudiant presents: <br>";
//Affichage des informations
while ($tab_contenu=mysql_fetch_assoc($req)){
echo $tab_contenu['auteur'];echo "<br>";
}
$abs=mysql_query("SELECT * FROM cliques WHERE raison='abscent'");
echo"<br>les etudiant abscent: <br>";
while ($tab_contenu=mysql_fetch_assoc($abs)){
echo $tab_contenu['auteur']; echo "<br>";

}
$ret=mysql_query("SELECT * FROM cliques WHERE raison='retard'");
echo"<br>les etudiants qui son en retard: <br>";
while ($tab_contenu=mysql_fetch_assoc($ret)){
echo $tab_contenu['auteur'];echo "<br>";

}

	echo "<br>";echo "<br>";echo "<br>";
//$result = mysql_query("SHOW COLUMNS FROM cliques");
//if (!$result) {
  // echo 'Impossible d\'exécuter la requête : ' . mysql_error();
   //exit;
//}
//if (mysql_num_rows($result) > 0) {
  // while ($row = mysql_fetch_assoc($result)) {
    //  echo "<br>";print_r($row);
   //}
//}
	?>

<style>

body {
  font: 10px sans-serif;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="http://d3js.org/d3.v2.min.js?2.9.5"></script>
<script>

var format = d3.time.format("%m/%d/%y");

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var z = d3.scale.category20c();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.days);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var stack = d3.layout.stack() // stack utilise la classe de D3 ( les colones)
    .offset("zero")
    .values(function(d) { return d.values; })
    .x(function(d) { return d.date; })
    .y(function(d) { return d.value; });

var nest = d3.nest() // fonction java regroupe le tableau qui a pour clé (key) : Groupe
    .key(function(d) { return d.key; });

var area = d3.svg.area()// pour chak donnée, AREA qui va permetre de calculé laire via layout de D3
    .interpolate("cardinal")
    .x(function(d) { return x(d.date); })// x des dates 
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv", function(data) {
  data.forEach(function(d) {
    d.date = format.parse(d.date);
    d.value = +d.value;
  });

  var layers = stack(nest.entries(data)); // creer un layer qui est stack qui utilise nest qui pren en entré data 

  x.domain(d3.extent(data, function(d) { return d.date; }));//renvoi  la date la plus ptite et la date la plus grands c sa x domaine 
  y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]); // renvoi de zer au max des Y 

  svg.selectAll(".layer")// dans lsvg on selectionne tout les classe layer 
      .data(layers) //  on lui passe des données 
    .enter().append("path")// un path c un chemin defini par latribu D! et dans d les données du tracé! exemple M 000,1000,01999 ...
      .attr("class", "layer") //
      .attr("d", function(d) { return area(d.values); })// recuperer les donné et faire passé par la fonction AREA qui va permetre de calculé laire via layout de D3
      .style("fill", function(d, i) { return z(i); });// la style de ce path et la couleur de remplissage c'est le num de la boucle qui est passer par le skal Z 

  svg.append("g") // l axe X
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")// l axe Y
      .attr("class", "y axis")
      .call(yAxis);
});

</script>
    
	
    
   


	</body>
</html>
